<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词库 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <div class="mb-6 flex justify-between items-center">
                <h1 class="app-title">词库</h1>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 搜索框 -->
            <div class="mb-6">
                <div class="relative">
                    <input type="text" placeholder="搜索词库" class="form-input pl-10">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            
            <!-- 分类筛选 -->
            <div class="mb-6 overflow-x-auto">
                <div class="flex space-x-2 pb-2">
                    <button class="badge badge-primary whitespace-nowrap">全部</button>
                    <button class="badge whitespace-nowrap">考试</button>
                    <button class="badge whitespace-nowrap">职场</button>
                    <button class="badge whitespace-nowrap">旅行</button>
                    <button class="badge whitespace-nowrap">专业</button>
                    <button class="badge whitespace-nowrap">日常</button>
                    <button class="badge whitespace-nowrap">文学</button>
                </div>
            </div>
            
            <!-- 难度筛选 -->
            <div class="mb-6">
                <h2 class="text-sm font-medium text-gray-700 mb-2">难度</h2>
                <div class="flex space-x-2">
                    <button class="badge whitespace-nowrap">基础</button>
                    <button class="badge badge-primary whitespace-nowrap">中级</button>
                    <button class="badge whitespace-nowrap">进阶</button>
                    <button class="badge whitespace-nowrap">高级</button>
                </div>
            </div>
            
            <!-- 词库列表 -->
            <h2 class="text-lg font-semibold mb-4">我的词库</h2>
            
            <div class="space-y-4">
                <!-- 词库项 1 -->
                <div class="card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-gray-800 text-lg">雅思核心词汇</h3>
                            <p class="text-sm text-gray-500">雅思考试必备的3000个核心词汇</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="badge">进阶</span>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span>共3000词</span>
                        <span>2022-10-15 添加</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 65%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 65%</span>
                        <div class="flex space-x-2">
                            <a href="learning.html" class="btn btn-primary text-sm py-2 px-4">
                                学习
                            </a>
                            <a href="review.html" class="btn btn-secondary text-sm py-2 px-4">
                                复习
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 词库项 2 -->
                <div class="card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-gray-800 text-lg">商务英语词汇</h3>
                            <p class="text-sm text-gray-500">职场和商务环境中常用的英语词汇</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="badge">中级</span>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span>共2500词</span>
                        <span>2022-11-03 添加</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 42%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 42%</span>
                        <div class="flex space-x-2">
                            <a href="learning.html" class="btn btn-primary text-sm py-2 px-4">
                                学习
                            </a>
                            <a href="review.html" class="btn btn-secondary text-sm py-2 px-4">
                                复习
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 词库项 3 -->
                <div class="card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-gray-800 text-lg">旅行英语词汇</h3>
                            <p class="text-sm text-gray-500">旅行中实用的英语单词和短语</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="badge">初级</span>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                        <span>共1200词</span>
                        <span>2022-12-20 添加</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 88%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 88%</span>
                        <div class="flex space-x-2">
                            <a href="learning.html" class="btn btn-primary text-sm py-2 px-4">
                                学习
                            </a>
                            <a href="review.html" class="btn btn-secondary text-sm py-2 px-4">
                                复习
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 添加词库按钮 -->
            <div class="fixed bottom-24 right-4 z-50 shadow-lg">
                <button class="w-14 h-14 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg">
                    <i class="fas fa-plus text-xl"></i>
                </button>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 